<template>
	<div class="foSi14 poRel" style="padding: 20px;">
		<div class="borRad20 coFFF hei34 dis disAl cuPo poAbs fanhui" @click.stop="fanhui()">返回</div>
		<div class="mar" style="width: 840px;padding-top: 40px;">
			<div class="foSi12 titl">基本信息</div>
			<el-form ref="ruleForm" :model="ruleForm" :rules="rules">
				<div class="wid100 hei44 dis disAl item-l mar-bott10">
					<div class="dis disAl disJuB hei100 item-r">
						<div class="dis disAl">
							<span class="mar-right5" style="color: #FF0000;">*</span>
							<span>课程名称</span>
						</div>
						<el-form-item class="mp0" prop="name">
							<el-input v-model="ruleForm.name" style="width: 140px;" placeholder="请填写课程名称" />
						</el-form-item>
					</div>
					<div>1-30个字符，支持汉字，字母及数字。</div>
				</div>
				<div class="wid100 hei44 dis disAl item-l mar-bott10">
					<div class="dis disAl disJuB hei100 item-r" style="border-right: 2px solid #fff;">
						<div class="dis disAl">
							<span class="mar-right5" style="color: #FF0000;">*</span>
							<span>课程时长（分钟）</span>
						</div>
						<el-form-item class="mp0" prop="kcTime">
							<el-input v-model="ruleForm.kcTime" style="width: 140px;" placeholder="请输入课程时长" />
						</el-form-item>
					</div>
					<div class="dis disAl disJuB hei100 item-r">
						<div class="dis disAl">颜色</div>
						<el-popover v-model="isPopover" popper-class=".monitor-yt-popover1" placement="bottom"
							width="220" trigger="click">
							<div class="wid100">
								<div class="coFFF dis disAl"
									style="background: #84878d;height: 24px;padding-left: 10px;">选颜色</div>
								<div class="wid100 dis disAl flwa" style="padding: 11px 5px 5px 11px;">
									<div v-for="(item,index) in colorList" :key="index"
										@click.stop="ruleForm.color = item,isPopover = false" class="col cuPo"
										:style="'background: #'+item+';'">
									</div>
								</div>
							</div>
							<div slot="reference" class="dis disAl hei34 bacFFF cuPo"
								style="border: 1px solid #d9d9d9;">
								<span style="width: 10px;"></span>
								<span style="width: 100px;height: 20px;"
									:style="'background: #'+ruleForm.color+';'"></span>
								<div class="dis disJuC" style="width: 40px;">
									<i class="el-icon-arrow-down"></i>
								</div>
							</div>
						</el-popover>
					</div>
				</div>
			</el-form>
		</div>
		<div class="dis disAl disJuC " style="padding: 30px 0;">
			<div class="dis disAl hei34 borRad20 coFFF cuPo" style="background: #6b7cdd;padding: 0 24px;"
				@click.stop="submitForm('ruleForm')">保存</div>
			<div class="mar-left30 dis disAl hei34 borRad20 coFFF cuPo" style="background: #616b74;padding: 0 24px;"
				@click.stop="fanhui">取消</div>
		</div>
	</div>
</template>

<script>
	import {
		getXuan
	} from '@/utils/limits.js'
	import {
		mapGetters
	} from 'vuex' // Secondary package based on el-pagination
	import {
		uploadimg, //图片上传
		sendCode //获取验证码
	} from '@/api/utils'
	import {
		courseAddEdit,
		courseDetails
	} from '@/api/coures'
	export default {
		name: 'courseTeamEdit',
		components: {},
		data() {
			const validateTime = (rule, value, callback) => {
				var reg = new RegExp('^-?[0-9]*.?[0-9]*$')
				if (!reg.test(value) || !value || value > 1440 || value === 0) {
					callback(new Error('请输入课程时长(1~1440)'))
				} else {
					callback()
				}
			}
			return {
				isPopover: false,
				colorList: [
					"FBB0A1", "FEFF99", "BCFD84", "95E2F5", "928FD9",
					"47D95E", "E5D0C4", "9c4b4b", "db6a51", "f5c856",
					"75c090", "ed707a", "b0649a", "d19fc9", "8b9599",
					"9c8088", "a6c399", "5b6fc1", "9583b0", "b0a763",
					"da8e6d", "b07187", "F8F6EF", "EBDBC9", "DAE1EB",
					"EBF4F7", "E7DAD1", "F7F1F1", "F3D5D7", "DDCCCD",
					"F4F0E5", "EDA7A6", "D0CAB7", "EDE9E8", "E6CEB7",
					"F4D7B7", "F2E8D5", "FBF0C8", "ABB5C8", "DCDCDC",
					"FBECE6", "C4C6B8", "EADDE3", "ECF0EF"
				],
				ruleForm: {
					name: '',
					kcTime: 0,
					color: 'd19fc9'
				},
				rules: {
					name: [{
						required: true,
						message: '请填写1-30个字符课程名称',
						trigger: 'blur'
					}],
					kcTime: [{
						required: true,
						trigger: 'blur',
						validator: validateTime
					}],
				},
				cid: 0
			}
		},
		computed: {
			...mapGetters([
				'permission_routes',
				'roles'
			])
		},
		created() {
			var query = this.$route.query
			this.cid = query.cid
			var xuanList = [{
				name: '编辑课程',
				url: '/course/courseTeamEdit?cid=' + this.cid,
				pd: true
			}]
			var xuanList1 = getXuan(xuanList, this.roles)
			this.$store.dispatch('user/changeXuan', {
				key: 'xuanList',
				value: xuanList1
			})
			this.$store.dispatch('user/changeXuan', {
				key: 'xuan',
				value: 0
			})
			this.getList()
		},
		methods: {
			fanhui() {
				this.$router.go(-1)
			},
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						courseAddEdit({
							'name': this.ruleForm.name,
							'type': 4,
							'long_time': this.ruleForm.kcTime,
							'colors': this.ruleForm.color,
							'id': this.cid
						}).then(response => {
							this.fanhui()
						}).catch(error => {
							console.log(error)
						})
					} else {
						this.$message.error('请按规则填写完整信息')
						return false
					}
				})
			},
			getList() {
				courseDetails({
					'courseid': this.cid // 1团课2精品课3私教课4班课
				}).then(response => {
					const {
						data
					} = response
					this.ruleForm = {
						name: data.name,
						kcTime: data.long_time,
						color: data.colors
					}
				}).catch(error => {
					console.log(error)
				})
			}
		}
	}
</script>

<style>
	..monitor-yt-popover1 {
		padding: 0;
		border-color: #84878d;
	}

	..monitor-yt-popover1 .popper__arrow::after {
		border-bottom-color: #84878d !important;
	}
</style>

<style lang="scss" scoped>
	.fanhui {
		background: #6b7cdd;
		padding: 0 24px;
		right: 63px;
		top: 10px;
		z-index: 10;
	}

	.titl {
		height: 25px;
		color: #787878;
	}

	.item-l {
		background: #f2f2f2;
	}

	.item-r {
		width: 420px;
		padding: 0 15px;
	}

	.col {
		width: 36px;
		height: 36px;
		margin: 0 4px 3px 0;
	}
</style>